---
title: Dropdown Menu
description: Accessible menu with items, labels, separators and submenus.
component: DropdownMenu
---

<LiveComponent language="tsx">
{`
  import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuCheckboxItem } from "@pipecat-ai/voice-ui-kit";

  <DropdownMenu>
    <DropdownMenuTrigger>Open</DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuLabel>Menu Label</DropdownMenuLabel>
      <DropdownMenuSeparator />
      <DropdownMenuItem>Item 1</DropdownMenuItem>
      <DropdownMenuItem>Item 2</DropdownMenuItem>
      <DropdownMenuItem>Item 3</DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuCheckboxItem checked={true}>Item 1</DropdownMenuCheckboxItem>
      <DropdownMenuCheckboxItem checked={false}>Item 2</DropdownMenuCheckboxItem>
      <DropdownMenuCheckboxItem checked={false}>Item 3</DropdownMenuCheckboxItem>
    </DropdownMenuContent>
  </DropdownMenu>
`}
</LiveComponent>

<TypeTable
  className="text-sm"
  type={{
    rounded: {
      description: "Content border radius",
      type: '"base" | "none" | "sm" | "md" | "lg" | "xl"',
      required: false,
      default: '"base"',
    },
    shadow: {
      description: "Content shadow depth",
      type: '"none" | "xshort" | "short" | "long" | "xlong"',
      required: false,
      default: '"short"',
    },
  }}
/>


